<template>
  <div class="main-content">
    <div style="display: flex;background: linear-gradient(aquamarine,#E9EEF3, aquamarine);">
      <div class="left"></div>

      <div class="center">
        <div>
          <el-row :gutter="20">
            <el-col :span="12">
              <img src="../../assets/imageBox/businessImg/风景树.webp" alt="" style="width: 100%; height: 350px; border-radius: 20px; margin: 15px 15px;">
            </el-col>
            <el-col :span="12" style="text-align: left;padding: 15px 0 0 20px;">
              <div style="font-size: 22px; font-weight: 900; margin-right: 10px; overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">{{ treeData.treeproduce }}</div>
              <div style="font-size: 15px; color: #a0a5a8; margin-top: 20px;">在售数量: {{ treeData.sellnum }}</div>
              <div style="font-size: 15px; margin: 20px 0 0 0;">
                树苗:<span> {{ treeData.treename }} </span></div>
              <div style="font-size: 15px; margin: 20px 0 0 0;">商家: <span>{{ treeData.username }}</span></div>
              <div style="font-size: 15px; margin: 20px 0 0 0;">年份: <span>{{ treeData.treetime }} 年</span></div>
              <div style="font-size: 15px; margin: 15px 0 0 0; color: coral">价格: <span style="font-size: 20px">￥ {{ treeData.treeprice }} / 棵</span></div>
              <div style="font-size: 15px; margin: 20px 0 0 0;">种类: <span>{{ treeData.treetypename }}</span></div>
              <div style="font-size: 15px; margin: 20px 0 0 0;" >
                <el-button type="warning" round @click="buy">树苗订购</el-button>
                <el-button type="warning" round @click="collect">收藏</el-button>
              </div>
            </el-col>
          </el-row>
        </div>

        <!--树苗订购模块设计-->
        <div>
          <el-dialog title="树苗订购信息" :visible.sync="dialogFormVisible" style="text-align: center;">
            <el-form :model="treeData" style="text-align: center;">
              <el-form-item label="树苗名称" :label-width="formLabelWidth">{{ treeData.treename }}</el-form-item>
              <el-form-item label="商家名称" :label-width="formLabelWidth">{{ treeData.username }}</el-form-item>
              <el-form-item label="树苗单价" :label-width="formLabelWidth">{{ treeData.treeprice }}</el-form-item>
              <el-form-item label="收货人邮箱" :label-width="formLabelWidth">{{ user.email }}</el-form-item>
              <el-form-item label="订购数量" :label-width="formLabelWidth">
                <el-button type="warning" style="width: 25px; height: 25px; font-size: 11px; border-radius: 50%; padding: 0 5px; text-align: center;" @click="numdown10">-10</el-button>
                <el-button type="warning" style="width: 25px; height: 25px; font-size: 18px; border-radius: 50%; padding: 0 5px; text-align: center;" @click="numberdown">-</el-button>
                {{ treenumber }}
                <el-button type="warning" style="width: 25px; height: 25px; font-size: 18px; border-radius: 50%; padding: 0 5px; text-align: center;" @click="numberup">+</el-button>
                <el-button type="warning" style="width: 25px; height: 25px; font-size: 11px; border-radius: 50%; padding: 0 5px; text-align: center;" @click="numup10">+10</el-button>
              </el-form-item>
              <el-form-item label="总计金额" :label-width="formLabelWidth">
                {{ treesum }}
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" >
              <el-button @click="dialogFormVisible = false">取 消 订 购</el-button>
              <el-button type="primary" @click="submitorder">确 认 订 购</el-button>
            </div>
          </el-dialog>
        </div>

        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick" style= "padding: 15px;">
            <el-tab-pane label="详细信息" name="first">详细信息</el-tab-pane>
            <el-tab-pane label="树苗评价" name="second">树苗评价</el-tab-pane>
            <el-tab-pane label="种植建议" name="thired">种植建议</el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <div class="right"></div>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";

export default {
  data(){
    let treeId = this.$route.query.treeId
    return {
      user: JSON.parse(sessionStorage.getItem("user") || {}),
      treeId: treeId,
      treeData: {},
      activeName: 'first',
      dialogFormVisible: false,
      formLabelWidth:'90px',
      treenumber: 0,
      treesum: 0,
      form:{},
    }
  },
  created() {
    this.loadtree();
  },
  methods: {
    loadtree() {
      request.get("/tree/findbyid?treeId=" + this.treeId).then(res => {
        if (res.code ==='0') {
          this.treeData = res.data
          console.log(this.treeData);
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    buy(){
      this.dialogFormVisible = true;
    },
    collect(){
      request.post("/tree/collect/" + this.treeId,this.user).then(res => {
        if (res.code === '0') {
          this.$message.success("收藏成功，快去个人中心看看吧")
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    numdown10(){
      if (this.treenumber === 0 || this.treenumber - 10 <= 0) {
        this.treenumber = 0;
        this.$message.warning("树苗数量已经为0")
      } else {
        this.treenumber = this.treenumber - 10;
        this.treesum = this.treenumber * this.treeData.treeprice;
      }
    },
    numberdown(){
      if (this.treenumber === 0) {
        this.$message.warning("树苗数量已经为0")
      } else {
        this.treenumber = this.treenumber - 1;
        this.treesum = this.treenumber * this.treeData.treeprice;
      }
    },
    numberup(){
      if (this.treenumber >= this.treeData.sellnum) {
        this.$message.warning("已经达到商家在售数量上限")
      } else {
        this.treenumber = this.treenumber + 1;
        this.treesum = this.treenumber * this.treeData.treeprice;
      }
    },
    numup10(){
      if (this.treenumber >= this.treeData.sellnum || this.treenumber + 10 >= this.treeData.sellnum) {
        this.treenumber = this.treeData.sellnum
        this.$message.warning("已经达到商家在售数量上限")
      } else {
        this.treenumber = this.treenumber + 10;
        this.treesum = this.treenumber * this.treeData.treeprice;
      }
    },
    submitorder(){
      request.post("/order/addorder/" + this.treenumber,this.treeData.treeId).then(res => {
        if(res.code === '0'){
          this.$message.success("操作成功")
        }
        else{
          this.$message.error(res.msg)
        }
      })
      this.dialogFormVisible = false;
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
    }
  }
}

</script>

<style>

.main-content {
  width: 100%;
  margin: 0 auto;
}

.left {
  height: auto;
  background: linear-gradient(aquamarine,#E9EEF3, aquamarine);

}

.center {
  width: 60%;
  height: 1000px;
  background-color: rgba(233,238,243);
  border-radius: 25px;
  margin: 20px auto;
}

.right {
  height: auto;
  background: linear-gradient(aquamarine,#E9EEF3, aquamarine);

}

</style>